﻿<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">服务器信息</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                <i class="fa fa-times"></i>
            </button>
        </div>
    </div>
    <div class="box-body">
        <div class="progress-group">
            <span class="progress-text" id="hardDiskUsageRate"></span>
            <span class="progress-number" id="hardDiskProgress"></span>
            <div class="progress sm">
                <div id="hardDiskProgressBar" class="progress-bar"></div>
            </div>
        </div>
        <div class="progress-group">
            <span class="progress-text" id="cpuUsageRate"></span>
            <span class="progress-number" id="cpuProgress"><b>@ViewBag.CpuUsageRate</b>/100 %</span>
            <div class="progress sm">
                <div id="cpuProgressBar" class="progress-bar progress-bar-@(ViewBag.CpuUsageRate<=50?" green":ViewBag.CpuUsageRate<=80?"yellow":"red")"></div>
            </div>
        </div>
        <div class="progress-group">
            <span class="progress-text" id="memoryUsageRate">内存使用率：@ViewBag.MemoryUsageRate %</span>
            <span class="progress-number" id="memoryProgress"><b>@ViewBag.MemoryUsageRate</b>/100 %</span>
            <div class="progress sm">
                <div id="memoryProgressBar" class="progress-bar progress-bar-@(ViewBag.MemoryUsageRate<=50?" green":ViewBag.MemoryUsageRate<=80?"yellow":"red")" style="width: @ViewBag.MemoryUsageRate%"></div>
            </div>
        </div>
    </div>
</div>
<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">常用工具下载</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                <i class="fa fa-times"></i>
            </button>
        </div>
    </div>
    <div class="box-body">
        <ul>
            <li>
                <a href="~/down/superservice.rar">SuperService</a>
            </li>
            <li>
                <a href="~/down/monitor.rar">Monior</a>
            </li>
            <li>
                <a href="~/down/c-lodop.rar">C-Lodop</a>
            </li>
            <li>
                <a href="~/down/cpu.rar">CPU卡组件</a>
            </li>
        </ul>
    </div>
</div>
@section scripts
    {
    <script>

        var socket;
        var uri = "ws://" + window.location.host + "/ws";

        function doConnect() {
            socket = new WebSocket(uri);
            socket.onopen = function (e) {
                doSend("getComputerInfo");
            };
            socket.onclose = function (e) {

            };
            socket.onmessage = function (e) {
                var data = $.parseJSON(e.data);

                console.log(data.HardDiskUsageRate);
                $("#hardDiskUsageRate").text("硬盘已使用：" + data.HardDiskUsageRate + "%");
                $("#hardDiskProgress").html("<b>" + data.HardDiskUseageSpace + "</b>/" + data.HardDiskSpace + "GB");
                $("#hardDiskProgressBar").css("width", data.HardDiskUsageRate + "%");
                $("#hardDiskProgressBar").removeClass();
                $("#hardDiskProgressBar").addClass("progress-bar");
                if (data.HardDiskUsageRate <= 50) {
                    $("#hardDiskProgressBar").addClass("progress-bar-green");
                } else if (data.HardDiskUsageRate <= 80) {
                    $("#hardDiskProgressBar").addClass("progress-bar-yellow");
                } else {
                    $("#hardDiskProgressBar").addClass("progress-bar-red");
                }

                $("#cpuUsageRate").text("CPU使用率：" + data.CpuUsageRate + "%");
                $("#cpuProgress").html("<b>" + data.CpuUsageRate + "</b>/100%");
                $("#cpuProgressBar").css("width", data.CpuUsageRate + "%");
                $("#cpuProgressBar").removeClass();
                $("#cpuProgressBar").addClass("progress-bar");
                if (data.CpuUsageRate <= 50) {
                    $("#cpuProgressBar").addClass("progress-bar-green");
                } else if (data.CpuUsageRate <= 80) {
                    $("#cpuProgressBar").addClass("progress-bar-yellow");
                } else {
                    $("#cpuProgressBar").addClass("progress-bar-red");
                }


                $("#memoryUsageRate").text("内存使用率：" + data.MemoryUsageRate + "%");
                $("#memoryProgress").html("<b>" + data.MemoryUsageRate + "</b>/100%");
                $("#memoryProgressBar").css("width", data.MemoryUsageRate + "%");
                $("#memoryProgressBar").removeClass();
                $("#memoryProgressBar").addClass("progress-bar");
                if (data.MemoryUsageRate <= 50) {
                    $("#memoryProgressBar").addClass("progress-bar-green");
                } else if (data.MemoryUsageRate <= 80) {
                    $("#memoryProgressBar").addClass("progress-bar-yellow");
                } else {
                    $("#memoryProgressBar").addClass("progress-bar-red");
                }
                setTimeout(doSend("getComputerInfo"), 500);

            };
            socket.onerror = function (e) { write("Error: " + e.data); };
        }

        function doSend(text) {
            socket.send(text);
        }

        function onInit() {
            doConnect();
        }

        window.onload = onInit;
        window.onbeforeunload = function () {
            socket.close();
        };
    </script>
}
